<template>
  <el-dialog title="衍生逻辑配置" :visible.sync="dialogVisible" width="60%">

    <div>
      {{ reslutStr }}
    </div>
    <div class="ed-yyds-set-div">
      <!-- 可视化数据 -->
      <div class="ed-yyds-visualization-div">
        <draw :cols="cols" :data="data"></draw>
      </div>
    </div>
    <div style="display: flex;align-items: center;margin-top: 10px;">
      <span>保留小数位数：</span>
      <el-input-number size="mini" v-model="num" :min="0" label="小数位数"></el-input-number>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="sumbit()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import draw from '@/views/page/kong2/draw'
export default {
  components: { draw },
  data() {
    return {
      dialogVisible: true,
      cols: [{
        "columnName": "name",
        "dimensionName": "指标名称",
        "dataType": "VARCHAR"
      },
      {
        "columnName": "dept_id",
        "dimensionName": "部门",
        "dataType": "VARCHAR"
      },
      {
        "columnName": "time",
        "dimensionName": "时间维度",
        "dataType": "DATE"
      },
      {
        "columnName": "value",
        "dimensionName": "指标值",
        "dataType": "VARCHAR"
      }],
      data: [{
        id: '0',
        symbol: '',
        col: '',
      }],
      num: 2,
    }
  },

  mounted() {
  },

  computed: {
    reslutStr() {
      let str = ''
      this.data.forEach((item, index) => {
        if (item.children) {
          str += item.symbol + ' ( '
          str += this.getStr(item.children) + ' ) '
        } else {
          str += item.symbol + ' [' + item.col + '] '
        }
      })
      return '= ROUND( ' + str.trim() + ', ' + this.num + ' )'
    }
  },

  methods: {
    init(str) {
      this.str = str
      this.dialogVisible = true
    },


    sumbit() {
      let str = this.getStr(this.data)
      if (str) {
        str = '= ROUND( ' + str + ', ' + this.num + ' )'
        console.log(str)
      } else {
        this.$message.warning('数据填写不完整，请确认后重试！')
      }
    },

    getStr(data) {
      let str = ''
      let pass = true
      data.forEach((item, index) => {
        if (item.children) {
          if (item.symbol === '' && index !== 0) { pass = false }
          str += item.symbol + ' ( '
          let d = this.getStr(item.children)
          if (d) { str += d + ' ) ' } else { pass = false }
        } else {
          str += item.symbol + ' [' + item.col + '] '
          if (item.col === '') {
            pass = false
          }
          if (item.symbol === '' && index !== 0) {
            pass = false
          }
        }
      })
      if (pass) {
        return str.trim()
      } else {
        return null
      }
    }
  },
}
</script>

<style scoped>
.ed-yyds-set-div {
  width: 100%;
  border: 1px solid rgb(211, 211, 211);
  margin-top: 20px;
}

.ed-yyds-visualization-div {
  height: 250px;
  overflow: scroll;
  white-space: nowrap;
}
</style>